import React, { PureComponent } from 'react'
import { Form, Modal, Row, Col, Button, Input, Select, InputNumber, DatePicker, Table } from 'antd'
import { DataList } from 'components'
import moment from 'moment';

const FormItem = Form.Item

@Form.create()
class Dialog extends PureComponent {

	render() {
		const { item = {}, itemDetails,<#if (modalProps.pagination)> itemDetailsPagination,</#if> modalType, onOk, form, dispatch, loading,${namespace}${modalProps.dataSource?cap_first},<#list modalProps.fields as field><#if (field.type=='TreeSelect')>${field.name}Tree,</#if></#list><#list modalProps.fields as field><#if (field.type=='DataList')> ${namespace}${field.name? cap_first},</#if></#list> ...modalProps } = this.props
		
		const { getFieldDecorator, validateFields, getFieldsValue, setFieldsValue } = form
		
		const handleOk = () => {
			validateFields(errors => {
				if (errors) {
					return
				}
				const data = {
					...getFieldsValue()
				}
				<#list modalProps.fields as field><#if (field.type=='DataList')>
				data.${field.name}={"id":data.${field.name}Option.key}
				delete data.${field.name}Option
				<#elseif (field.type=='TreeSelect')>
				data.${field.name}={"id":data.${field.name}Node.key}
				delete data.${field.name}Node
				<#elseif (field.type=='DatePicker')>
				data.${field.name}=moment(data.${field.name}).format('YYYY-MM-DD')
				</#if></#list>
				data.inMaterialDetails=itemDetails
				onOk(data)
			})
		}
		
	<#list modalProps.fields as field>
	<#if (field.type=='DataList')>
		const ${field.name}Props={
			dispatch,
			loading,
			filterItem:${namespace}${field.name? cap_first}.filterItem,
			dataSource:${namespace}${field.name? cap_first}.list,
			pagination:${namespace}${field.name? cap_first}.pagination,
			visible:${namespace}${field.name? cap_first}.visible,
			selectedRows:${namespace}${field.name? cap_first}.selectedRows,
			selectedRowKeys:${namespace}${field.name? cap_first}.selectedRowKeys,
			columns:[<#list field.columns as field>
			{
				title:'${field.title}',
				dataIndex: '${field.dataIndex}',
				key: '${field.dataIndex}',<#if (field.align)>
				align:'left',</#if><#if (field.render)>
				render:(text, record) => {
					return (text);
				}</#if>
			},</#list>
			],
			namespace:'${namespace}${field.name? cap_first}',
			multiple:false,
			filterItems:[<#list field.filters as filter>
				{
					type: '${filter.type}',
					label: '${filter.label}',
					target: '${filter.name}',
					tip: '輸入${filter.label}',
					key: '${filter.name}',
				},</#list>
			],
			modalProps:{
				title:'${field.label}列表',
				width:800,
			},
			onOk(keys,rows){
				item.${field.name}Id=keys.length==0 ? undefined : keys[0]
				item.${field.name}=rows.length==0 ? undefined : rows[0].name
				dispatch({type:'${namespace}/updateState',payload:{currentItem:item}})
				setFieldsValue({ ${field.name}Option: keys.length==0 ? undefined : { key: keys[0], label: rows[0].${field.name} } });
			},
		}
	</#if>
	</#list>
	<#if (modalProps.add)>
		const ${namespace}${modalProps.dataSource?cap_first}Props={
			dispatch,
			loading,
			filterItem:${namespace}${modalProps.dataSource?cap_first}.filterItem,
			dataSource:${namespace}${modalProps.dataSource?cap_first}.list,
			pagination:${namespace}${modalProps.dataSource?cap_first}.pagination,
			visible:${namespace}${modalProps.dataSource?cap_first}.visible,
			selectedRows:${namespace}${modalProps.dataSource?cap_first}.selectedRows,
			selectedRowKeys:${namespace}${modalProps.dataSource?cap_first}.selectedRowKeys,
			columns:[<#list modalProps.details as field>
			{
				title:'${field.title}',
				dataIndex: '${field.dataIndex}',
				key: '${field.dataIndex}',<#if (field.align)>
				align:'left',</#if><#if (field.render)>
				render:(text, record) => {
					return (text);
				}</#if>
			},</#list>
			],
			namespace:'${namespace}${modalProps.dataSource?cap_first}',
			multiple:true,
			filterItems:[<#list modalProps.filters as filter>
				{
					type: '${filter.type}',
					label: '${filter.label}',
					target: '${filter.name}',
					tip: '輸入${filter.label}',
					key: '${filter.name}',
				},</#list>
			],
			modalProps:{
				title:'列表',
				width:800,
			},
			onOk(keys,rows){
				dispatch({type:'${namespace}/updateItemDetails',payload:{rows:${namespace}${modalProps.dataSource?cap_first}.selectedRows}})
			},
		}
	</#if>
		const removeItem=(item)=>{
			const {itemDetails,dispatch } = this.props
			let arr=itemDetails.filter(_=>_.code!=item.code)
			dispatch({type:'${namespace}/updateState',payload:{itemDetails:arr}})
		}
	
		const columns=[<#list modalProps.columns as field>
			{
				title:'${field.title}',
				dataIndex: '${field.dataIndex}',
				key: '${field.dataIndex}',<#if (field.align)>
				align:'left',</#if><#if (field.render)>
				render:(text, record) => {
					<#if (field.edit??)>
					return (<${field.edit} style={{width:'100%'}} defaultValue={<#if (field.edit=='DatePicker')>text?moment(text):moment()<#else>text</#if>} onBlur={e => record.${field.dataIndex}=<#if (field.edit=='Select')>e<#elseif (field.edit=='DatePicker')>moment(e).format('YYYY-MM-DD')<#else>e.target.value</#if>}/>)
					<#else>
					return (text);
					</#if>
				}</#if>
			},</#list>
			<#if (modalProps.add)>
			{
				title: '操作',
				width: 150,
				render: (text, record) => {
					if(modalType=='view'){
						return ''
					}else{
						return (<Button onClick={e=>removeItem(record)}>刪除</Button>)
					}
				}
			}</#if>
		]

		return (
			<Modal {...modalProps} onOk={handleOk}>
				<Form>
					<Row gutter={10}><#list modalProps.fields as field>
						<#if (field.type=='DataList')>
						<Col span={12}>
							<FormItem label={'${field.label}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
							<InputGroup compact>
								{getFieldDecorator('${field.name}Option', {
									initialValue: {key:item.${field.name}Id?item.${field.name}Id:'',label:item.${field.name}?item.${field.name}:''},
									rules: [
										{validator:async (rule, value) => {if(value.key==''){throw new Error('请选择${field.label}!');}}},
									],
								})
								(
									
									<Select placeholder='${field.label}'
									 	style={{width:'80%'}}
										showArrow={false}
										labelInValue >
										<Select.Option value={item.${field.name}Id?item.${field.name}Id:''}>{item.${field.name}?item.${field.name}:''}</Select.Option>
									</Select>
									
								)
								}
							<Button style={{width:'20%'}} type="primary" onClick={e => {dispatch({type:'${namespace}${field.name? cap_first}/query'});dispatch({ type:'${namespace}${field.name? cap_first}/showModal' })}}>. . .</Button>
							</InputGroup>
							</FormItem>
						</Col>
						<#elseif (field.type=='TreeSelect')>
						<Col span={12}>
							<FormItem label={'${field.label}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
								{getFieldDecorator('${field.name}Node', {
									initialValue: item.${field.name}Id==null?undefined:{value:item.${field.name}Id,label:item.${field.name}},
									rules: [
										{required: true,message:'请选择${field.label}!'},
									],
								})
								(
									<TreeSelect placeholder='${field.label}' treeDefaultExpandAll labelInValue treeData={${field.name}Tree} />
								)
								}
							</FormItem>
						</Col>
						<#elseif (field.type=='Radio')>
						<Col span={12}>
							<FormItem label={'${field.label}'} labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
								{getFieldDecorator('${field.name}', {
									initialValue: item.${field.name},
									rules: [
										{required: true,message:'请选择${field.label}!'},
									],
								})(<Radio.Group><Radio value={1}>是</Radio><Radio value={0}>否</Radio></Radio.Group>)}
							</FormItem>
						</Col>
						<#else>
						<Col span={12}>
							<FormItem label={'${field.label}'} hasFeedback labelCol={{ span: 6 }} wrapperCol= {{ span: 14 }}>
								{getFieldDecorator('${field.name}', {
									initialValue: <#if (field.type=='DatePicker')>item.${field.name}?moment(item.${field.name}):moment()<#else>item.${field.name}</#if>,
									rules: [
										{
											required: true,
										},
									],
								})(<${field.type} />)}
							</FormItem>
						</Col></#if></#list>
				 	</Row>
				</Form>
				<#list modalProps.fields as field>
				<#if (field.type=='DataList')>
				<DataList {...${field.name}Props}/>
				</#if>
				</#list>
				<#if (modalProps.add)>
				<DataList {...${namespace}${modalProps.dataSource?cap_first}Props}/>
				
				<Row>
					<Col span={24}>
					{modalType==='create'?<Button onClick={e=>{dispatch({type:'${namespace}${modalProps.dataSource?cap_first}/query'});dispatch({type:'${namespace}${modalProps.dataSource?cap_first}/showModal'})}} type="primary">添加</Button>:''}
					</Col>
				</Row>
				</#if>
				<Row>
					<Col span={24}>
					<Table rowKey={record => record.code} <#if (!modalProps.pagination)>pagination={false}<#else>pagination={itemDetailsPagination} onChange={page=>{dispatch({ type: '${namespace}/queryDetail', payload: { page: page.current, pageSize: page.pageSize } })}}</#if> dataSource={itemDetails} columns={columns} />
					</Col>
				</Row>
			</Modal>
		)
	}
}
export default Dialog